import { cn } from '@/utils/common'
import { useState } from 'react'

type Props = {
  names: string[]
  value: number
  onClick: (index: number) => void
  style?: React.CSSProperties
}
const VMenu = (props: Props) => {
  const { names, value, onClick, style } = props

  return (
    <div style={style} className="flex gap-1 bg-blue-200 p-4 text-black">
      {names.map((name, index) => {
        return (
          <button
            key={index}
            className={cn(value === index && 'bg-blue-300', 'rounded p-2 hover:bg-blue-300')}
            onClick={() => onClick(index)}
          >
            {name}
          </button>
        )
      })}
    </div>
  )
}

const Person = () => {
  const [num, setNum] = useState(0)
  const [record, setRecord] = useState<object | null | number>({ a: 1, b: 2 })
  console.log(num)
  console.log('record', record)
  return (
    <>
      <VMenu
        names={['Home', 'About', 'Contact']}
        value={num}
        onClick={(index) => {
          setRecord(index)
          setNum(index)
        }}
      />
    </>
  )
}

export default Person
